<template>
  <div class="file">
    <el-container>
      <el-aside width="200px">
        <!-- //侧边导航 -->
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="0"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              default-openeds="1"
              active-text-color="#409EFF"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><document-copy /></el-icon>
                  <span>全部文件</span>
                </template>
                <el-menu-item index="1-1">图片</el-menu-item>
                <el-menu-item index="1-2">文档</el-menu-item>
                <el-menu-item index="1-3">视频</el-menu-item>
                <el-menu-item index="1-4">链接</el-menu-item>
                <el-menu-item index="1-5">视频</el-menu-item>
                <el-menu-item index="1-6">其它</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="2">
                <el-icon><share /></el-icon>
                <span>分享文件</span>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon><delete /></el-icon>
                <span>回收站</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {
  ElMain,
  ElAside,
  ElContainer,
  ElCol,
  ElRow,
  ElMenu,
  ElSubMenu,
  ElIcon,
  ElMenuItem,
} from "element-plus";

import { DocumentCopy, Delete, Share } from "@element-plus/icons-vue";
import { onMounted ,ref} from "vue";
import service from "../../../mock/indexFile.js";

export default {
  setup() {
    const fileMsg=ref([]);
    onMounted(async () => {
      const fileData = await service.getDate();
      // table.value = tableData.data.result;
      fileMsg.value=fileData.data.result;
      console.log(fileData.data.result);
    });
    return{
      fileMsg
    }
  },
  components: {
    ElMain,
    ElAside,
    ElContainer,
    ElCol,
    ElRow,
    ElMenu,
    ElSubMenu,
    ElIcon,
    ElMenuItem,
    DocumentCopy,
    Delete,
    Share,
  },
};
</script>

<style lang="less" scoped>
.file {
  padding: 0;
  height: 100%;
  background: white;
  .el-container {
    height: 100%;
    padding: 0;
    .el-aside {
      height: 100%;
      // background-color: #114fa0;
      // background-color: #e6e6e6;
      .el-menu {
        /deep/ .el-menu-item span,
        .el-menu-item .el-icon {
          font-size: 16px;
          font-weight: 600;
        }
        .el-sub-menu {
          /deep/ .el-sub-menu__title {
            font-size: 20px;
            font-weight: 600;
          }
        }
        line-height: 60px;
        font-size: 1rem;
        text-align: center;
        color: var(--el-text-color-primary);
        /deep/.el-sub-menu__icon-arrow {
          display: none;
        }
      }
    }
   
  }
}
</style>
